@import "./computedColor.less";
@import "./index.less";

.productservice {
    background-color: @defaultBgWhiteColor;
    .title-img {
        .mg(-1.1rem -0.75rem -0.6rem 0);
    }
    .product_text {
        .fs(18);
        color: @productTextColor;
        .lh(32);
        .mg(0.3rem 0 0.4rem 0);
    }

    .productserviceTop {
        background: @defaultBgGrayColor;
        overflow: hidden;
    }

    .culture {
        line-height: 200px;
    }
.hove_title {
    i {
        background: url("../../imgs/arrow-page-links-h.png") no-repeat center 9px;
        background-size: 19px 13px;
        display: inline-block;
        width: 38px;
        height: 26px;
        vertical-align: top;
        opacity: 0;
        transition: all 0.6s ease-in-out;
    }
    span {
        opacity: 0;
        transition: all 1s ease-in-out;
    }
    &:hover {
        i {
            opacity: 1;
            margin-left: 5px;
        }
        span {
            opacity: 1;
        }
    }
}
    .culture_img {
        box-shadow: 0 0 10px #000000;
        border-radius: 50%;
        margin-right: 60px;
        transition: all 1s linear;
        &:hover {
            transform: rotateZ(360deg);
        }
    }

    .fj_his {
        .pd(0.3rem 0.5rem 0 0);
        .fs(14);
    }

    .tel-a {
        color: @productTelColor;
    }

    a.btn-objSave {
        .mg(0 0.16rem 0 0);
    }

    .product {
        background-color: @defaultBgWhiteColor;
        position: relative;
        .pd(0.7rem 0.7rem 1.2rem);
        .mg(0 auto);
    }

    .mgt-150 {
        .mg(-1.5rem auto 0);
    }

    .product_block {
        li {
            .fl(left);
        }
    }

    .product-img {
        .fl(left);
        .w(100);
        .h(100);
        .mg(0 0.4rem 0 0);
    }

    .product-context {
        .fl(left);
        p {
            .mg(0.2rem 0 0 0);
            .fs(14);
            .lh(18.5);
        }
    }

    .col-list {
        .mg(0 0 0.55rem);
    }

    .UseSence {
        .tabs {
            .mg(0.68rem 0 0);
        }
    }
    .Helper {
        .help-h2 {
            .mg(0 0.8rem 0 0);
            .fl(left);
        }
        .help-nav {
            .fl(left);
            .pd(0.22rem 0 0);
            ul {
                .fl(left);
                a {
                    .lh(32);
                    color: @HelementColor;
                    .fs(14);
                    &.helper-dev {
                        color: @heliperDev;
                        .mg(0.1rem 0 0);
                    }
                    &.helper-dev-more {
                        .pd(0 0.22rem 0 0);
                        background: url("../../imgs/link-next.png") no-repeat right 9px;
                        background-size: 8px 12px;
                    }
                }
            }
        }
        .help-h4 {
            .fs(22);
            .lh(30);
            .mg(0 0 0.16rem);
            color: @HelementColor;
            .pos(relative);
            &:before {
                .pos(absolute);
                content: '';
                top: -0.18rem;
                .w(40);
                .h(2);
                background: @beforeColor;
            }
        }
    }
    .Question {
        ul {
            .fl(left);
            border-top: 1px solid @boderDefaultColor;
            .mg(0.5rem 0 0.35rem);
            li {
                display: block;
                border-bottom: 1px solid @boderDefaultColor;
            }
            .ques-link {
                display: block;
                .pd(0.25rem 0);
                .fs(14);
                background: url("../../imgs/expand.png") no-repeat right center;
                background-size: 0.1rem 0.1rem;
                &:hover {
                    background: url("../../imgs/expand-h.png") no-repeat right center;
                    color: @heliperDev;
                    background-size: 0.1rem 0.1rem;
                }
            }
        }
        .ques-left {
            margin-left: 0.9rem;
        }
    }
}

.DevLink {
    .link {
        div {
            flex: 1;
            .h(32);
            .lh(32);
            .pd(0.34rem 0 0.34rem 0.34rem);
            .mg(0 0.2rem 0 0);
            .pos(relative);
            &:after {
                content: '';
                .pos(absolute);
                .w(100);
                .h(100);
                left: 0;
                top: 0;
                background: @liAfterBgColor;
            }
            img {
                .pos(relative);
                z-index: 9;
                display: block;
                .w(32);
                .h(32);
                float: left;
                margin-right: 0.54rem;
            }
            a {
                display: inline-block;
                .fs(22);
                color: @HelementColor;
                background: url("../../imgs/arrow-page-links.png") no-repeat right 9px;
                background-size: 19px 13px;
                padding-right: 27px;
                font-weight: 400;
                -webkit-transition: all 0.3s linear;
                -moz-transition: all 0.3s linear;
                -ms-transition: all 0.3s linear;
                -o-transition: all 0.3s linear;
                transition: all 0.3s linear;
                &:hover {
                    background: url("../../imgs/arrow-page-links-h.png") no-repeat right 9px;
                    background-size: 19px 13px;
                    padding-right: 27px;
                    color: @heliperDev;
                }
            }
        }
    }
}
